<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>请登录</title>
<link rel="stylesheet" href="/static/layui-v2.4.5/layui/css/layui.css">
<link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/res/common/css/global.css">
<script type="text/javascript" src="/static/jquery/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style type="text/css">
    .horizontal-center{
        text-align: center;
    }
    .photo-row{
        margin-top: 50px;
    }
    .form-div{
        margin-top: 20px;
    }
    .form-item{
        width: 100%;
        margin-top: 10px;
        height: 40px;
        border: darkgray 1px solid;
        border-radius: 3px;
        vertical-align: center;
        display: flex;
        background-color: #FFFFFF;
    }
    .login-input{
        font-size: 20px;
        border: none;
        margin-top: 5px;
        margin-left: 5px;
        width: 100%;
        padding-right: 5px;
    }
    .login-icon{
        font-size: 30px;
        margin-top: 4px;
        margin-left: 2px;
    }
    .submit-btn{
        height: 40px;
        margin-top: 30px;
        border: none;
        font-size: 18px;
        text-align: center;
    }
    .btn-span{
        color: #FFFFFF;
    }
    .assistant-item{
        margin-top: 10px;
        font-size: 16px;
    }
    i.i-to-register{
        float: left;
    }
    i.i-forget-password{
        float: right;
    }
    input::-webkit-input-placeholder{
        /* 使用webkit内核的浏览器 */
        color: lightgray;
        font-style: italic;
        font-size: 18px;
    }
    input:-moz-placeholder{
        /* Firefox版本4-18 */
        color: lightgray;
    }
    input::-moz-placeholder{
        /* Firefox版本19+ */
        color: lightgray;
    }
    input:-ms-input-placeholder{
        /* IE浏览器 */
        color: lightgray;
    }
    .other-login-div{
        position: fixed;
        width: 100%;
        height: 50px;
        bottom: 50px;
    }
    .other-guide{
        text-align: center;
    }
    .other-icon-col{
        text-align: center;
    }
    i.other-icon-i{
        font-size: 40px;
    }
    i.layui-icon-login-wechat{
        color: #4daf29;
    }
    i.layui-icon-login-qq{
        color: #3492ed;
    }
    i.layui-icon-login-weibo{
        color: #cf1900;
    }
</style>
</head>
<body>

<div class="layui-box top-div">
<div class="layui-row photo-row">
    <div class="layui-col-xs4">&nbsp;</div>
    <div class="layui-col-xs4 horizontal-center">
        <img class="layui-circle photo" src="/res/icon/middle/head-default.png">
    </div>
    <div class="layui-col-xs4">&nbsp;</div>
</div>
<div class="layui-row form-row">
    <div class="layui-col-xs1">&nbsp;</div>
    <div class="layui-col-xs10">
        <div class="form-div">
            <div id="login-div">
                <div class="form-item">
                    <i class="layui-icon layui-icon-username login-icon"></i>
                    <input class="login-input" type="text" placeholder="账号/邮箱/手机号">
                </div>
                <div class="form-item">
                    <i class="layui-icon layui-icon-password login-icon"></i>
                    <input class="login-input" type="password">
                </div>
                <div class="assistant-item">
                    <a href="/page/user/register.html"><i class="assistant-i i-to-register">没有账号？去注册</i></a>
                    <a href="/page/user/valiCode.html"><i class="assistant-i i-forget-password">忘记密码</i></a>
                </div>
                <button class="layui-btn  layui-btn-fluid submit-btn"><span class="btn-span">登&nbsp录</span></button>
            </div>
        </div>
    </div>
    <div class="layui-col-xs1">&nbsp;</div>
</div>

<div class="other-login-div">
    <div class="layui-row">
        <div class="layui-col-xs1">&nbsp;</div>
        <div class="layui-col-xs3">
            <hr/>
        </div>
        <div class="layui-col-xs4">
            <p class="other-guide">其它账号登录</p>
        </div>
        <div class="layui-col-xs3">
            <hr/>
        </div>
        <div class="layui-col-xs1">&nbsp;</div>
    </div>
    <div class="layui-row layui-col-space3">
        <div class="layui-col-xs3">&nbsp;</div>
        <div class="layui-col-xs2 other-icon-col">
            <a id="wechat-login-a" class="other-login-a" href="javascript:void(0);">
                <i class="layui-icon layui-icon-login-wechat other-icon-i"></i>
            </a>
        </div>
        <div class="layui-col-xs2 other-icon-col">
            <a id="qq-login-a" class="other-login-a" href="javascript:void(0);">
                <i class="layui-icon layui-icon-login-qq other-icon-i"></i>
            </a>
        </div>
        <div class="layui-col-xs2 other-icon-col">
            <a id="weibo-login-a" class="other-login-a" href="javascript:void(0);">
                <i class="layui-icon layui-icon-login-weibo other-icon-i"></i>
            </a>
        </div>
        <div class="layui-col-xs3">&nbsp;</div>
    </div>
</div>
</div>

<script src="/static/layui-v2.4.5/layui/layui.js"></script>
<script type="text/javascript">
$(function () {
    var layer;
    layui.use('layer', function () {
        layer=layui.layer;
    });
    $('a.other-login-a').on('click', function () {
        layer.tips('客官别急，功能即将上线哦', '#'+$(this).attr('id'));
    })
});
</script>
</body>
</html>